<script setup>
import 'bootstrap/dist/css/bootstrap.min.css'
import QA from "../QA.vue"
import {useRoute} from 'vue-router'
import ServiceNav from "@/components/ServiceNav.vue";
import fuwu from '@/fuwu.js'
// import Jhl from "@/components/view/services/Jhl.vue"
import {defineAsyncComponent} from "vue";

const route = useRoute()

const data = function () {
  for (const item in fuwu) {
    const data = fuwu[item]
    if (data.path === route.path) {
      return data
    }
  }
  return {}
}()

const asyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    switch (data.path) {
      case '/services/sj':
        resolve(import("@/components/view/services/Sj.vue"))
        break
      case '/services/hxjl':
        resolve(import("@/components/view/services/Hxjl.vue"))
        break
      case '/services/lxjl':
        resolve(import("@/components/view/services/Lxjl.vue"))
        break
      case '/services/sx':
        resolve(import("@/components/view/services/Sx.vue"))
        break
      case '/services/wxd':
        resolve(import("@/components/view/services/Wxd.vue"))
        break
      case '/services/dc':
        resolve(import("@/components/view/services/Dc.vue"))
        break
      case '/services/ylqx':
        resolve(import("@/components/view/services/Ylqx.vue"))
        break
      case '/services/jhl':
        resolve(import("@/components/view/services/Jhl.vue"))
        break
    }
  })
})

</script>

<template>
  <section class="elementor-section elementor-section-header">
    <div class="elementor-container">
      <div class="elementor-column-50">
        <div class="elementor-widget-wrap">
          <div class="elementor-element">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">一站式计量行业解决方案</h2></div>
          </div>
          <div class="elementor-element">
            <div class="elementor-widget-container">
              <h3 class="elementor-heading-title elementor-size-default">{{ data.title }}</h3></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="container">
    <div class="center">
      <div class="">
        <p class="colText">
          {{data.info}}
        </p>
      </div>
    </div>
  </div>
  <div class="severAll">

    <div class="container severBox">
      <div class="row ">
        <div class="col-6">
          <img fetchpriority="high" decoding="async" width="578" height="373" :src="data.detail_img"
               sizes="(max-width: 1024px) 100vw, 1024px" alt="">
        </div>
        <div class="col-6 severRight">
          <h3>{{ data.title }}</h3>
          <p>{{ data.detail }}</p>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="tjAll">
      <div class="container">
        <div class="tjTitle">
          <img src="../../assets/images/tjPic.png">
        </div>
        <div class="row tjText">

          <div class="col-4 tjNavLeft">
            <ServiceNav/>

          </div>
          <div class="col-8 tjNavRight">
            <asyncComponent/>
          </div>
          <div class="more">立即咨询 > </div>
        </div>
      </div>


    </div>
    <div class="botPicAll">
      <img class="one" src="../../assets/images/rkPic.png"/>
      <img class="two" src="../../assets/images/botPic.png"/>
    </div>
  </div>

  <QA></QA>

  <div class="container">更多问题请与我们的工程师联系</div>

</template>

<style scoped>
.text-center{
  margin-top: 50px;
}
.elementor-section-header {
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  background-color: #000000;
  background-image: url("/src/assets/images/img/01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.elementor-section {
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  color: #6c6c6c;
  word-wrap: break-word;
  box-sizing: border-box;
  position: relative;
}

.elementor-container {
  min-height: 560px;
  max-width: 1400px;
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

h2.elementor-heading-title {
  font-size: 24px;
  color: #fce497;
}

h3.elementor-heading-title {
  font-size: 75px;
  color: #ffffff;
}

img {
  height: auto;
  max-width: 100%;
}
.container{
  text-align: center;
}
.colText{
  font-size:20px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-style: Medium;
  margin: 50px auto 20px auto;

}
.severAll{
  display: flex;
  justify-content: space-between;
  background: #fff;
  text-align: left;
  padding: 0px 60px 60px 60px;
}
.severBox{
  background: #fff;
  box-shadow: 0px 17px 12px 0px #D9D9D926;
  padding: 50px;
}

.severRight{
  align-content: left;
  /* margin-top: 80px; */
}
.severRight h3{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}
.severRight p{
  font-size: 18px;
  line-height: 40px
;
}
.tjAll{
  padding-top: 50px;
  background: #F6F8FC;
}
.tjTitle{
  width: 395px;
  height: 66px;
  margin:  20px auto 60px auto;
}
.tjTitle img {
  width: 100%;
  height: 100%;
}
.tjNavRight{
  font-size: 20px;
}
.more{
  width: 226px;
  height: 54px;
  line-height: 54px;
  opacity: 1;
  border-radius: 3px;
  background: linear-gradient(90deg, #45AFFF 0%, #5669E7 100%);
  margin: 40px auto;
  color: #fff;
}
.botPicAll{
  margin: 50px;
}
.botPicAll .one{
  width: 1300px;
  height: 166px;
  img{
    width: 100%;
    height: 100%;
  }
}
.botPicAll .two{
  width: 1300px;
  height: 166px;
  img{
    width: 100%;
    height: 100%;
  }
}

</style>